<template>
  <div class="login-container">
    <h1>用户登录</h1>
    <div class="login-form">
      账号：<input type="text" v-model="account"><br/>
      密码：<input type="password" v-model="pwd" placeholder="初始密码为123456"><br/>
      <p style="margin: 0px; text-align: right;">
        <a href="/modifyPwd" style="color: white; font-size: 0.9rem;">修改密码</a>
      </p>
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import axios from '../axios/index.js'
import { useUserStore } from '../store/UserStore.js';
import { ref,reactive} from 'vue'
import { useRouter } from 'vue-router'
function setup(){
    const account = ref("");
    const pwd = ref("");

    const router = useRouter();
    async function login(){
        let result = await axios.post("/users/login",{account:account.value,pwd:pwd.value});
            let r = result.data;
            alert(r.msg);
            let store = useUserStore();
            store.login(r.data.user,r.data.jwttoken);
            // 获取 user_role_id
            const userRoleId = r.data.user.user_role_id;
            // 根据角色跳转不同路径
            if (userRoleId === 3) {
                router.push('/staff');
            } else {
                router.push('/salary');
            }
    }
    return{account,pwd,login}
}
export default {setup}
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/background.jpeg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Arial, sans-serif;
}

.login-form {
    background-color: rgba(35, 48, 129, 0.5);
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    position: relative;
    z-index: 1;
}

.login-form input {
    margin-bottom: 10px;
    padding: 5px;
    width: 200px;
}

.login-form button {
    width: 70px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 5px;
    margin-left: 100px;
}
</style>